<template>
	<view class="uni_box home">
		<!-- <navbar title='课程详情' :yin="true">
		</navbar> -->
		<Nheader></Nheader>
		<view class="content">
			<image
				:src="goodsinfo.image"
				mode="widthFix"
				class="onetu"
			/>
			<view class="navview">
				<text class="ntit">{{info.title}}</text>
				<view class="jiaview">
					<text class="jia">¥<text class="jianum">{{goodsinfo.price}}</text></text>
					<view class="shting" @click="getshiting">
						<image class="jiaoicon" src="@/pages_subject/static/img/jiaoicon.png" mode="" />
						<text>申请试听</text>
					</view>
				</view>
				<view class="tban" v-if="tke!=''">
					<text class="btit">同班型课程</text>
					<view class="keitem">
						<!-- <view class="items iactive">CFA一级冲刺私播</view> -->
						<view class="items" :class="item.id==goodsinfo.id?'iactive':''" v-for="(item,index) in goods" :key="index" @click="goodClick(item)">{{item.title}}</view>
					</view>
				</view>
				<view class="tban">
					<text class="btit">课程简介</text>
					<view class="kemiao">
						<u-parse :html="goodsinfo.describe" :tag-style="style"></u-parse>
					</view>
				</view>
			</view>
			<view class="yinview"></view>
			<view class="ndetail">
				<view class="ndone">
					<u-tabs :list="tablist" :is-scroll="false" :current="tabcurrent" @change="tabchange" active-color="#E8433A" inactive-color="#999" font-size="25"></u-tabs>
				</view>
				<view class="dmiao" v-if="tabcurrent == 0">
					<u-parse :html="goodsinfo.content" :tag-style="style"></u-parse>
				</view>
				<view class="dmiao" v-if="tabcurrent == 1">
					<view class="keview" v-for="(item,index) in kegang" :key="index">
						<view class="keone" @click.stop="oneClick(index,item)">
							<image class="quanjia" src="@/pages_subject/static/img/cai.png" mode="" />
							<text class="kname txt">{{ item.name }}</text>
							<u-icon name="arrow-right" class="ml" color="#333" size="28" v-if="!item.iszhan1"></u-icon>
							<u-icon name="arrow-down" class="ml" color="#333" size="32" v-if="item.iszhan1"></u-icon>
						</view>
						<view class="twoitem" v-if="item.iszhan1" v-for="(i,ind) in item.list" :key="ind">
							<view class="keone ketwo" @click.stop="twoClick(index,ind)">
								<image class="quanjia" src="@/pages_subject/static/img/cai.png" mode="" />
								<text class="knametwo txt">{{i.name}}</text>
								<u-icon name="arrow-right" class="ml" color="#333" size="24" v-if="!i.iszhan2"></u-icon>
								<u-icon name="arrow-down" class="ml" color="#333" size="24" v-if="i.iszhan2"></u-icon>
							</view>
							<view class="keone kethree" v-if="i.iszhan2" v-for="(j,inds) in i.list" :key="inds" @click.stop="threeClick(j)">
								<image class="quanjia" src="@/pages_subject/static/img/cai.png" mode="" />
								<text class="knametwo txt">{{j.name}}</text>
								<!-- <u-icon name="arrow-right" class="ml" color="#333" size="24"></u-icon> -->
							</view>
						</view>
						
					</view>
				</view>
			</view>

		</view>
		<view class="dbotview">
			<view class="botitem" @click="gethome">
				<image class="shome" src="@/pages_subject/static/img/shome.png" mode="" />
				<text class="botname">首页</text>
			</view>
			<view class="botitem" @click="getshoucang">
				<image class="shome" src="@/pages_subject/static/img/cs.png" v-if="goodsinfo.is_collection==0" mode="" />
				<image class="shome" src="@/pages_subject/static/img/sc.png" v-if="goodsinfo.is_collection==1" mode="" />
				<text class="botname">收藏</text>
			</view>
			<view class="zaixian">在线咨询</view>
			<view class="goumai" @click="goumai">
				<text class="zjia">立即购买 ¥<text class="zjianum">{{goodsinfo.price}}</text></text>
			</view>
		</view>
		<!-- 试听弹窗 -->
		<view class="st">
			<u-popup v-model="stshow" mode="center" @close="stshow=false" width="80%" :closeable="true">
				<view class="stpop">
					<!-- <view class="chaview">
						<image class="macha" src="@/pages_subject/static/img/macha.png" mode="" />
					</view> -->
					<image class="mapop" mode="widthFix" :src="taninfo.image" />
					<text class="matit">注：{{taninfo.title}}</text>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				style: {
						img: 'width:max-width:100%;height:auto;pointer-events: none;'
				},
				info:{},
				stshow:false,
				tke:[],
				taninfo:{
					image:'',
					title:''
				},
				goods:[],
				goodsinfo:{},
				tablist:[
					{
						name: '课程详情'
					}, {
						name: '课程大纲'
					}
				],
				tabcurrent:1,
				kegang:[]
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getDetail()
			this.fgetComboSimailar();//获取同班型课程
			this.getdagang();//大纲
		},
		onShow() {
		},
		methods: {
			async getDetail(){
				let res = await this.$u.api.getComboInfo({
					id:this.id
				});
				this.info = res.box
				this.goods = res.goods
				this.goodsinfo = res.goods[0]
			},
			async fgetComboSimailar(){
				let res = await this.$u.api.getComboSimailar({
					id:this.id
				});
				this.tke = res
			},
			async getdagang(){
				let res = await this.$u.api.getComboChapt({
					id:this.id
				});
				let data = res
				for(let i in data){
					data[i].iszhan1 = true
					// data[i].iszhan2 = false
					for(let j in data[i].list){
						data[i].list[j].iszhan2 = true
					}
				}
				this.kegang = data
				console.log(this.kegang)
			},
			oneClick(index,item){
				let kegang  = this.kegang
				kegang[index].iszhan1 = !kegang[index].iszhan1
				this.kegang = kegang
			},
			twoClick(index,ind){
				let kegang  = this.kegang
				kegang[index].list[ind].iszhan2=!kegang[index].list[ind].iszhan2
				this.kegang = kegang
			},
			threeClick(item){
				this.toPage(item)
			},
			gethome(){
				uni.switchTab({ url: '/pages/tabbar/Tabhome' })
			},
			async getshiting(){
				let res = await this.$u.api.getFreeImage({
					free_id:this.id
				});
				this.taninfo = res
				this.stshow=true
			},
			async getshoucang(){
				let res = await this.$u.api.addComboCollection({
					id:this.goodsinfo.id
				});
				this.goodsinfo.is_collection = this.goodsinfo.is_collection==1?"0":"1"
				this.$u.toast("操作成功");
			},
			goodClick(item){
				this.goodsinfo = item
			},
			goumai(){
				this.navrouter("/pages_subject/twoPage/MinePage/ConfirmOrder?id="+this.goodsinfo.id);
			},
			tabchange(e){
				console.log(e)
				this.tabcurrent  = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		min-height: 100vh;
		padding-bottom: 150rpx;
		.onetu{
			width: 100%;
		}
		.navview{
			padding: 30rpx;
			.ntit{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #111111;
			}
			.jiaview{
				border-bottom: 1rpx solid  #EEEEEE;
				padding-bottom: 20rpx;
				margin-top: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				.jia{
					font-family: DIN;
					font-weight: bold;
					font-size: 24rpx;
					color: #FA4E4E;
				}
				.jianum{
					font-size: 40rpx;
					margin-left: 4rpx;
				}
				.shting{
					margin-left: auto;
					padding: 12rpx 20rpx;
					border-radius: 50rpx;
					border: 1rpx solid #46C564;
					display: flex;
					align-items: center;
					flex-direction: row;
					.jiaoicon{
						width: 20rpx;
						height: 20rpx;
						margin-right: 12rpx;
					}
					text{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 22rpx;
						color: #46C564;
					}
				}
			}
		}
		.tban{
			margin-top: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid  #EEEEEE;
			.keitem{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.items{
					padding: 20rpx;
					margin: 0 15rpx 15rpx 0;
					background: #F8F8F8;
					border-radius: 10rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #555555;
				}
				.iactive{
					background: #FA4E4E;
					color: #fff;
				}
			}
			.kemiao{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #555555;
			}
		}
		.tban:last-child{
			border-bottom: none;
		}
		.btit{
			font-family: PingFangSC;
			font-weight: bold;
			font-size: 28rpx;
			color: #111111;
			display: block;
			margin-bottom: 30rpx;
		}
	}
	.dbotview{
		height: 120rpx;
		background: #FFFFFF;
		position: relative;
		position: fixed;
		width: 100%;
		bottom: 0;
		display: flex;
		flex-direction: row;
		padding: 0 30rpx;
		border-top: 1rpx solid #eee;
		align-items: center;
		.botitem{
			width: 15%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.shome{
				width: 30rpx;
				height: 30rpx;
				margin-bottom: 8rpx;
			}
			.botname{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #111111;
			}
			
		}
		.zaixian{
			width: 190rpx;
			height: 80rpx;
			background: #FFF0F0;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFangSC;
			font-weight: 800;
			font-size: 24rpx;
			color: #FA4E4E;
			margin: 0 30rpx 0 30rpx;
		}
		.goumai{
			flex: 1;
			height: 80rpx;
			background: linear-gradient(-90deg, #FA4E4E, #FD894F);
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFangSC;
			font-weight: 800;
			font-size: 24rpx;
			color: #FFFFFF;
			.zjianum{
				font-size: 32rpx;
				margin-left: 5rpx;
				display: inline-block;
			}
		}
	}
	.yinview{
		height: 30rpx;
		background: #F6F7FB;
		width: 100%;
	}
	.ndetail{
		.dmiao{
			padding: 30rpx;
		}
	}
	.st{
		/deep/.u-mode-center-box{
			background-color: transparent;
		}
		.stpop{
			background-color: #fff;
			height: 550rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			.mapop{
				width: 300rpx;
				height: 300rpx;
				margin-bottom: 50rpx;
			}
			.matit{
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #FA7938;
			}
			.chaview{
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				width: 40rpx;
				height: 40rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(202,205,217,0.4);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				// position: relative;
				.macha{
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}
	.keview{
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
		.keone{
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.kname{
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			display: block;
			max-width: 90%;

		}
		.quanjia{
			width: 30rpx;
			height: 20rpx;
			margin-right: 10rpx;
		}
		.lei{
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
		.knametwo{
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			display: block;
			max-width: 90%;
		}

		.ketwo{
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			margin-left: 30rpx;
		}
		.kethree{
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			margin-left: 50rpx;
		}
	}
</style>
